<!--
名称: 表格单选组件
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <el-table
        ref="grid"
        :data="tableData"
        border
        v-loading="tableLoading"
        :selectedData ="selectedData"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :row-key="getRecordKey"
        :row-style="{height: '35px',border: 'none',}"
        :cell-style="{padding: '0'}"
        @row-click="clickCurRowInfo"
        @selection-change="handleSelectionChange"
        class="wly-grid-container"
        :header-cell-style="{background:'#eef1f6',color:'#606266',fontSize: '14px'}"
        height="100%"
        style="width: 100%;font-size: 10px">
        <!--多选-   -->
        <el-table-column
            type="selection"
            reserve-selection
            width="55">
        </el-table-column>
        <el-table-column
            v-for="(item,index) in tableData[0]" :key="index"
            :prop="index"
            :label="item.colHeaderName || index"></el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: 'ATableRadioCom',
        props: {
          tableData: {
              type: Array
          },
          selectedData: {
              type: Array
          }
        },
        data () {
          return {
              flagTmp: false
          }
        },
        methods: {
            // 点击当前行
            clickCurRowInfo(row) {
                this.$emit('clickCurRowInfo', row)
            },
            // 获取选中行数据
            handleSelectionChange () {
                if (this.flagTmp) {
                    let val = this.$refs.grid.selection
                    this.$emit('getSelectRows', val)
                }
            },
            // 反显选中数据
            selectRows (val) {
                this.$nextTick(() => {
                    debugger
                    this.selectedData.forEach(col => {
                        this.tableData.forEach(row => {
                            if (col[val] == row[val]) {
                                this.$refs.grid.toggleRowSelection(row, true)
                            }
                        })
                    })
                    // 可以调用那个选择改变的方法
                    this.flagTmp = true
                })
            },
            getSelectRowData () {
                return this.$refs.grid.selection
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .el-table__body-wrapper
        height 92%!important
</style>
